<template>
  <div class="radar-box">
    <div style="width: 400px;margin-bottom: 30px;"><custom-title :title="title" /></div>
    <div style="width: 400px;height: 200px;">
      <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
    </div>
  </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';

export default {
  name: 'annular',
  components: {
    ResponsiveBarChart,
  },
  data () {
    return {
      title: '预警分析',
      chartOptions: {},
      seriesData: [2, 1.2, 2.4, 3.6, 3, 4],
      colors: ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', 'orange', 'skyblue'],
      legendData: ['a', 'b', 'c', 'd', 'e', 'f'], // 添加图例数据
      max: 12.5, //数据最大是多少
      radiusMax: 20,//一圈数据是多少
    }
  },
  computed: {},
  watch: {},
  methods: {
    onBarClicked (params) {
      console.log(params);
      // 在这里处理点击事件，例如弹出模态框显示更多数据
    },

    getOption () {

      let maxArr = this.seriesData.map(item => this.max - item);
      const legendData = this.seriesData.map(item => item.toString());

      this.chartOptions = {
        legend: {
          orient: 'vertical', // 设置图例垂直排列
          y: 'center', // 图例从顶部开始
          right: '10%', // 设置图例靠右侧显示，距离右侧的距离为10%
          icon: 'square',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          data: () => legendData,
          textStyle: {
            color: 'rgba(217, 231, 255, 1)', // 文字颜色
            fontSize: 12,
          }
        },
        polar: {
          center: ['30%', '50%'],
          radius: [0, '100%'],
          splitArea: { show: false },
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false }
        },
        angleAxis: {
          max: this.radiusMax,
          startAngle: 90,
          axisLine: { show: true }, // 隐藏角度轴的轴线 外圈轴线 圆圈
          axisTick: { show: false }, // 隐藏角度轴的刻度 超出圈的轴线
          axisLabel: { show: false }, // 隐藏角度轴的标签 刻度值
          splitLine: {
            show: true,
            lineStyle: {
              color: '#858384' // 设置radiusAxis的splitLine颜色为绿色
            }
          }, //中间散发的轴线
        },
        radiusAxis: {
          type: 'category',
          data: this.legendData,
          // type: 'value', // 如果你想控制半径起点，这里应该使用 value 类型
          // min: 1, // 设置半径的最小值
          max: 5, // 设置半径的最大值
          axisLine: { show: false }, // 隐藏半径轴的轴线 数据开始的地方的轴
          axisTick: { show: false }, // 隐藏半径轴的刻度 中间散发的轴上的刻度
          splitLine: { show: false, }, // 显示半径轴的分割线   //中间那个圈
          splitArea: { show: false }, // 显示半径轴的分割区域
          axisLabel: { show: false } // 隐藏半径轴的标签
        },
        tooltip: {},
        series: [
          {
            name: 'a',
            type: 'bar',
            stack: 'a',
            data: this.seriesData,
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            },
            itemStyle: {
              // 使用回调函数为每个数据点设置颜色
              color: (params) => {
                // 根据 dataIndex 获取对应的颜色
                return params.dataIndex === 0 ? 'rgba(0,0,0,0)' : this.colors[params.dataIndex];
              }
            }
          },
          {
            name: 'b',
            type: 'bar',
            data: maxArr,
            stack: 'a',
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            },
            itemStyle: {
              // 使用回调函数为每个数据点设置颜色
              color: (params) => {
                // 根据 dataIndex 获取对应的颜色
                return params.dataIndex === 0 ? 'rgba(0,0,0,0)' : '#222B34';
              }
            },
            tooltip: {
              show: false
            }
          }
        ]
      };
    }
  },
  created () {
    this.getOption()
  },
  mounted () { },
}
</script>
  
<style lang='less' scoped></style>